{% extends 'base.html' %}
{% load static %}
{% load staticfiles %}

{% block content %}

    <!-- Main content -->
    <section class="content">

        {% if message %}
            <div class="callout callout-danger">
                <h4>{{ message }}</h4>
            </div>
        {% endif %}

        <div class="row">
            <div class="col-md-3">

                <!-- Profile Image -->
                <div class="box box-primary">
                    <div class="box-body box-profile">
                        {% if user.photo_url %}
                            <img class="profile-user-img img-responsive img-circle"
                                 src="{{ user.photo_url }}" alt="用户头像">
                        {% else %}
                            <img class="profile-user-img img-responsive img-circle" src="{% static 'img/head.jpg' %}"
                                 alt="User profile picture">

                        {% endif %}

                        <h3 class="profile-username text-center">{{ user.user_name }}</h3>

                        <p class="text-muted text-center">{{ user.session.user_id }}</p>

                        <ul class="list-group list-group-unbordered">
                            <li class="list-group-item">
                                <b>账号余额</b> <a
                                    class="pull-right">{{ user.account_balance | floatformat }}元</a>
                            </li>
                            <li class="list-group-item">
                                <b>买入</b> <a class="pull-right">{{ buy_in }}手</a>
                            </li>
                            <li class="list-group-item">
                                <b>抛出</b> <a class="pull-right">{{ buy_out }}手</a>
                            </li>
                        </ul>

                        <button id="change_btn" type="submit" class="btn btn-primary btn-block"><b>修改头像</b></button>
                    </div>
                    <!-- /.box-body -->
                </div>

                <!-- 图片上传部分 -->
                <div hidden="hidden" class="col-center-block col-lg-10"
                     style="margin-top:60px; margin-bottom: 10px;text-align: right">
                    <button id="sub_btn" type="submit" data-toggle="modal" data-target="#myModal"
                            class="btn  btn-default btn-sm float-right">
                        上传图片
                    </button>
                </div>

                <!-- 上为按钮，下为弹框 -->

                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                    <div class="modal-dialog modal-sm" role="document">
                        <div class="modal-content upload_div">
                            <form id="uploadForm">
                                {% csrf_token %}
                                <div class="form-group">
                                    <input type="file" name="teamFile" accept="image/*">
                                </div>
                                <div class="form-group" role="group" aria-label="...">
                                    <input type="submit" class="btn  btn-default col-lg-12">
                                </div>
                                <div class="clear">&nbsp;</div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 图片上传部分 -->
                <!-- /.box -->

                {% comment %}
                <!-- About Me Box -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">About Me</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <strong><i class="fa fa-book margin-r-5"></i> Education</strong>

                        <p class="text-muted">
                            B.S. in Computer Science from the University of Tennessee at Knoxville
                        </p>

                        <hr>

                        <strong><i class="fa fa-map-marker margin-r-5"></i> Location</strong>

                        <p class="text-muted">Malibu, California</p>

                        <hr>

                        <strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>

                        <p>
                            <span class="label label-danger">UI Design</span>
                            <span class="label label-success">Coding</span>
                            <span class="label label-info">Javascript</span>
                            <span class="label label-warning">PHP</span>
                            <span class="label label-primary">Node.js</span>
                        </p>

                        <hr>

                        <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            {% endcomment %}

            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li><a href="#settings" data-toggle="tab">查看和修改我的信息</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="tab-pane" id="settings">
                            <form class="form-horizontal" id="user_form"
                                  action="{% url 'tradingSystem:deal_user_change' %}" method="post">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label for="user_id" class="col-sm-2 control-label">ID</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" readonly="readonly" name="user_id"
                                               id="user_id"
                                               value="{{ user.user_id }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="user_name" class="col-sm-2 control-label">姓名</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="user_name" id="user_name"
                                               value="{{ user.user_name }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="user_email" class="col-sm-2 control-label">邮箱</label>

                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" name="user_email" id="user_email"
                                               value="{{ user.user_email }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="user_sex" class="col-sm-2 control-label">性别</label>

                                    <div class="col-sm-10">
                                        <select name="user_sex" class="select2" id="user_sex" style="width: 100%">
                                            {% if user.user_sex == "男" %}
                                                <option class="active" value="男">男</option>
                                                <option value="女">女</option>
                                            {% else %}
                                                <option value="男">男</option>
                                                <option class="active" value="女">女</option>
                                            {% endif %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="phone_number" class="col-sm-2 control-label">手机</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="phone_number" class="form-control" id="phone_number"
                                               value="{{ user.phone_number }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="id_no" class="col-sm-2 control-label">身份证号</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="id_no" class="form-control" id="id_no"
                                               value="{{ user.id_no }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="account_num" class="col-sm-2 control-label">银行账户</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="account_num" class="form-control" id="account_num"
                                               value="{{ user.account_num }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="account_type" class="col-sm-2 control-label">银行类型</label>

                                    <div class="col-sm-10">
                                        <select name="account_type" class="select2" id="account_type"
                                                style="width: 100%">
                                            {% for bank in banks %}
                                                {% if bank == user.account_type %}
                                                    <option class="active" value="{{ bank }}">{{ bank }}</option>
                                                {% else %}
                                                    <option value="{{ bank }}">{{ bank }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="password" class="col-sm-2 control-label">密码</label>

                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" name="password" id="password">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="conf_password" class="col-sm-2 control-label">确认密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" name="conf_password"
                                               id="conf_password">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" id="conf_modify" class="btn btn-danger">确认修改</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->

    </section>
    <!-- /.content -->
{% endblock %}

{% block script %}

    <script type="text/javascript">
        $(document).ready(function () {
            $('.select2').select2();


            $('#change_btn').click(function () {
                $('#sub_btn').click();
            });


            $(function () {
                $('#uploadForm').submit(function () {
                    var data = new FormData($('#uploadForm')[0]);
                    $.ajax({
                        url: "{% url 'tradingSystem:update_img' %}",
                        type: 'POST',
                        data: data,
                        dataType: 'JSON',
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            alert("修改成功，刷新生效");
                        },
                        error: function () {
                            alert("网络错误");
                        }
                    });
                    return false;
                });
            });

        });

        {% comment %}

        function check_input(el) {
            var inputData = el.parents("form").find("input");
            $.each(inputData, function(){
               var data = this.value();
               console.log(data);
               if (!data) {
                   return false;
               }
            });

            return false;
        }

        $('conf_modify').click(function () {
            if (!check_input($('#conf_modify'))) {
                return false;
            } else{
                var form = document.getElementById("user_form");
                form.submit();
            }
        });
        {% endcomment %}


    </script>

{% endblock %}
